<script setup>
	import {
		onMounted
	} from 'vue'
	import {
		useCommunityStore
	} from '@/stores/communityStore.js'

	const communityStore = useCommunityStore()

	// 初始化加载数据
	onMounted(async () => {
		await communityStore.fetchTopics()
		await communityStore.fetchFriends()
	})
</script>

<template>
	<view class="friend-container">
		<view class="header">环保圈</view>
		<view class="topic-list">
			<view class="topic-item" v-for="item in communityStore.topics" :key="item.id">
				<image :src="item.imageUrl || '/static/images/community-avter.jpg'" mode="aspectFill"></image>
				<view class="topic-content">
					<view class="topic-title">{{item.title}}</view>
					<view class="topic-info">
						<text class="topic-unread">{{item.unread || '[0条]'}}</text>
						<text class="topic-message">{{item.message}}</text>
					</view>
				</view>
				<view class="topic-time">
					{{item.time}}
				</view>
			</view>
		</view>
		<view class="friend-header">圈友</view>
		<view class="friend-list">
			<view class="friend-item" v-for="item in communityStore.friends" :key="item.id">
				<image :src="item.imageUrl || '/static/images/community-avter.jpg'" mode="aspectFill"></image>
				<view class="friend-content">
					<view class="friend-name">{{item.name}}</view>
					<view class="friend-message">{{item.message}}</view>
				</view>
				<view class="friend-time">{{item.time}}</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.friend-container {
		padding: 0 30rpx;
		// background-color: #fff;

		.header {
			font-size: 36rpx;
			font-weight: bold;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
		}

		.topic-list {
			.topic-item {
				display: flex;
				align-items: center;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}

				.topic-content {
					flex: 1;
					min-width: 0;

					.topic-title {
						font-size: 30rpx;
						color: #333;
						margin-bottom: 8rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.topic-info {
						display: flex;
						align-items: center;

						.topic-unread {
							color: #f56c6c;
							margin-right: 10rpx;
							flex-shrink: 0;
							font-size: 24rpx;
						}

						.topic-message {
							color: #999;
							font-size: 26rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.topic-time {
					color: #999;
					font-size: 24rpx;
					flex-shrink: 0;
					margin-left: 20rpx;
				}
			}
		}

		.friend-header {
			font-size: 36rpx;
			font-weight: bold;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
		}

		.friend-list {
			.friend-item {
				display: flex;
				align-items: center;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}

				.friend-content {
					flex: 1;
					min-width: 0;

					.friend-name {
						font-size: 30rpx;
						color: #333;
						margin-bottom: 8rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.friend-message {
						color: #999;
						font-size: 26rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}

				.friend-time {
					color: #999;
					font-size: 24rpx;
					flex-shrink: 0;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>